<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //1、重要的算法：排他思想
        //如果有同一组元素，想要给某一个元素实现不一样的效果，就用到循环的排他思想
        //先所有元素清除样式
        //然后再给需要设置样式的元素设置样式

        //2、实例：五个按钮中，当点击其中的一个按钮的时候，这个按钮的背景色变成红色，其他按钮不变色
        //（1）、先获得按钮元素,这个是兼容所有的浏览器
        var btns = document.getElementsByTagName('button');
        //(2)、通过for循环来遍历每一个按钮,下面的btns是得到的伪数组，而btns[i]是里面的每一个元素
        for(var i = 0; i < btns.length;i++){
            btns[i].onclick = function(){
                //点击哪个按钮的时候，那个按钮的背景色是粉色，通过this就知道是点击的哪个按钮
                //有一个问题就是，点击之后的颜色依然是粉色，这就需要先把背景色清空，然后再给粉色
                //需要用到一个for循环，从新遍历这些按钮，
                for(var i = 0; i < btns.length;i++){
                    btns[i].style.backgroundColor = ''
                }
                //遍历完成后再给粉色
                this.style.backgroundColor = 'pink'

            }

        }
    </script>
</body>
</html>